<template>
	<el-form label-width="130px" :model="form" :rules="rules" ref="queryForm" @submit.prevent>
		<el-row>
			<el-col :span="12">
				<el-form-item label="军事基地名称" prop="name">
					<el-input v-model="form.name" style="width:240px;"></el-input>
				</el-form-item>

				<el-form-item label="军事基地编码" prop="code">
					<el-input v-model="form.code" style="width:240px;"></el-input>
				</el-form-item>

				<el-form-item label="隶属国家" prop="country">
					<el-input v-model="form.country" style="width:240px;"></el-input>
				</el-form-item>



				<el-form-item label="军事基地军力描述" prop="des">
					<el-input v-model="form.des" style="width:240px;" type="textarea" rows="12"></el-input>
				</el-form-item>

				<el-form-item label="作战任务" prop="task">
					<el-input v-model="form.task" style="width:240px;" type="textarea" rows="12"></el-input>
				</el-form-item>

				<el-form-item label="对我威胁" prop="menace">
					<el-input v-model="form.menace" style="width:240px;" type="textarea" rows="12"></el-input>
				</el-form-item>



			</el-col>

			<el-col :span="12">
				<el-form-item label="经度" prop="longitude">
					<el-input v-model="form.longitude" style="width:240px;"
						@input="e => regOnlyNumSpot(e, form, 'longitude', 12)"></el-input>
				</el-form-item>

				<el-form-item label="纬度" prop="latitude">
					<el-input v-model="form.latitude" style="width:240px;"
						@input="e => regOnlyNumSpot(e, form, 'latitude', 12)"></el-input>
				</el-form-item>


				<el-form-item label="距离" prop="distance">
					<el-input v-model="form.distance" style="width:240px;"
						@input="e => regOnlyNumSpot(e, form, 'distance', 2)"></el-input>
				</el-form-item>

				<el-form-item label="地址" prop="detailedAddress">
					<el-input v-model="form.detailedAddress" style="width:240px;"></el-input>
				</el-form-item>

				<el-form-item label="指挥官" prop="commander">
					<el-input v-model="form.commander" style="width:240px;"></el-input>
				</el-form-item>


				<el-form-item label="图片" prop="elevation">
					<el-upload class="upload-demo" action="" list-type="picture-card" :limit="1"
						:http-request="handImport" accept="" ref="uploadRef" :file-list="form.fileList">
						<el-icon class="el-icon--upload">
							<upload-filled />
						</el-icon>
						<div class="el-upload__text">
							<em>点击上传</em>
						</div>

					</el-upload>

				</el-form-item>

				<el-row style="margin-bottom: 10px;padding:0 10px;">
					<span>请上传 大小不超过 <span style="color: red;">5MB</span> 格式为 <span
							style="color: red;">png/jpg/jpeg</span> 的文件</span>
				</el-row>

				<el-form-item label="驻军人员数量" prop="garrison">
					<el-input v-model="form.garrison" style="width:240px;"
					@input="e => regOnlyNumSpot(e, form, 'garrison', 0)"></el-input>
				</el-form-item>

			</el-col>

		</el-row>



		<!-- <el-row style="margin-bottom: 10px;padding:0 10px;">
			<el-col :span="24">
				<span>请上传 大小不超过 <span style="color: red;">5MB</span> 格式为 <span
						style="color: red;">png/jpg/jpeg</span> 的文件</span>
			</el-col>
		</el-row> -->

		<!-- 	<el-row>
			<el-col :span="24">
				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark" style="width:240px;"></el-input>
				</el-form-item>
			</el-col>
		</el-row> -->



		<div style="display: flex;justify-content: flex-end;">
			<el-button @click="closethis()" @keyup.prevent @keydown.enter.prevent>取消</el-button>
			<el-button type="primary" @click="submit(queryForm)" @keyup.prevent @keydown.enter.prevent>确定</el-button>
		</div>

	</el-form>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'

	import {
		commonInterface,
		commonUpload
	} from '@/api/common/common'
	import {
		globalSrc
	} from '@/utils/global.js'

	import {
		regOnlyNumSpot
	} from '@/utils/reg'



	const emit = defineEmits(['getList', 'closeWindow'])
	const props = defineProps(['editData'])

	const form = ref({
		elevation: '',
		fileList: []

	})

	const queryForm = ref('')
	const uploadRef = ref()

	//必填项
	const rules = reactive({
		// name: [{
		// 	required: true,
		// 	message: "此选项不能为空!",
		// 	trigger: "blur"
		// }]

	})
	//取消
	const closethis = () => {
		emit('closeWindow')
	}

	//上传
	const handImport = (param) => {
		const file = param.file
		if (file.type.indexOf("image/") == -1) {
			ElMessage.error("文件格式错误，请上传图片类型,如:JPG,PNG后缀的文件。")
			uploadRef.value.clearFiles();
		} else {
			let fd = new FormData()
			fd.append('file', file)
			commonUpload(fd).then(result => {
				console.log('result', result);
				if (result.code === 200) {
					form.value.elevation = result.fileName
				}
			})
		}
	}


	//确定
	const submit = async (e) => {
		if (!e) return
		await e.validate((valid) => {
			if (valid) {
				let method = 'post'
				if (props.editData) method = 'put'
				commonInterface('/back/renfang/jjmb/military/', form.value, method).then(result => {
					if (result.code === 200) {
						ElMessage.success(result.msg)
						emit('closeWindow')
						emit('getList')
					} else {
						ElMessage.error(result.msg)
					}
				})
			}
		})
	}

	onMounted(() => {
		if (props.editData) {
			form.value = props.editData
			if (props.editData.elevation) {
				form.value.fileList = [{
					url: globalSrc + props.editData.elevation
				}]
			}
		}
	})
</script>

<style>
</style>